.water {
  height: 30px;
  width: 100%;
  z-index: 1;
  background:#fc6306;
  overflow:hidden;
  transform: rotate(0deg);
}

.water-c {
  position: relative;
}

.water-1 {
  background: url("") repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-1 3.5s infinite linear;
  animation: wave-animation-1 3.5s infinite linear;
}

.water-2 {
  top: 5px;
  background: url("") repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-2 6s infinite linear;
  animation: wave-animation-2 6s infinite linear;
}

.water-1, .water-2 {
  position: absolute;
  width: 100%;
  height: 60px;
}

.back-white {
  background: #fff;
}

@keyframes wave-animation-1 {
  0% {
    background-position: 0 top;
  }

  100% {
    background-position: 600px top;
  }
}

@keyframes wave-animation-2 {
  0% {
    background-position: 0 top;
  }

  100% {
    background-position: 600px top;
  }
}